<template>
  <el-row :gutter="25">
    <el-col :span="5">
      <!--选择器-柱状图-->
      <div class="bar-select">
        <!--选择器-->
        <div class="select">
          <el-cascader
              clearable
              v-model="selectValue"
              :options="selectOptions"
              :props="selectProps"
              @change="selectHandleChange"
          />
        </div>
        <!--柱状图-->
        <div style="border: 1px solid #fff;padding: 10px;margin-top: 10px;border-radius: 5px">
          <div class="bar" ref="bar" style="width: 100%;height: 300px"></div>
        </div>

      </div>

      <!--饼状图-->
      <div style="margin-top: 25px">
        <div style="margin-bottom: 10px"><span>就业人数占比</span></div>
        <!--时间选择器-->
        <div>
          <el-date-picker
              v-model="yearSelect"
              type="year"
              :editable="false"
              placeholder="请选择年份"
              @change="handleDatePicker"
          />
        </div>
        <!--饼状图-->
        <div style="border: 1px solid #fff;padding: 10px;margin-top: 10px;border-radius: 5px">
          <div class="pie" ref="pie" style="height: 300px"></div>
        </div>
      </div>
    </el-col>

    <el-col :span="13" style="border-radius: 5px;border: 1px solid #fff;padding: 10px">
      <div class="mapChoose">
            <span v-for="(item,index) in parentInfo" :key="item.code">
                <span class="title"
                      @click="chooseArea(item,index)">{{
                    item.cityName == '全国' ? '中国' : item.cityName
                  }}</span>
                <span class="icon" v-show="index+1!=parentInfo.length">></span>
            </span>
      </div>
      <!--全国地图-->
      <div class="map" ref="map" style="width: 100%;height: 100%"></div>
    </el-col>

    <el-col :span="6">
      <!--词云图-->
      <div style="border: 1px solid #fff;padding: 10px;border-radius: 5px">
        <div class="word-cloud" ref="wordCloud" style="width: 100%;height: 300px"></div>
      </div>

      <div style="margin-top: 25px;width: 85px;padding: 20px" class="employment-rate">就业率</div>
      <!--柱状图-->
      <div style="border: 1px solid #fff;padding: 10px;border-radius: 5px;margin-top: 10px">
        <div class="rate-bar" ref="rateBar" style="width: 100%;height: 300px"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {onMounted, ref, getCurrentInstance, onUnmounted, onBeforeUnmount} from 'vue'
// import china from 'echarts/map/json/china.json'
//
// echarts.registerMap('china', china)
const {proxy} = getCurrentInstance()
const employmentRate = ref([])
const employmentQuantity = ref([])
const successEmploymentQuantity = ref([])
const barSelectEmploymentQuantity = ref([])
const barSelectSuccessEmploymentQuantity = ref([])
const scaleData = ref([])
const parentId = ref(3)
const childrenId = ref(10)
// 日期选择器
const yearSelect = ref('2017')
// select选择器
const selectValue = ref([])
const selectProps = {
  expandTrigger: 'hover'
}
const selectOptions = ref([])
const provinceYearMap = ref({})


const selectHandleChange = (value) => {
  parentId.value = value[0]
  childrenId.value = value[1]
  searchEmploymentYearByParentIdAndChildrenId()
}

// 初始化选择器-柱状图
const barSelect = () => {
  let myChart = echarts.init(proxy.$refs.bar);
  let option;
  option = {
    // backgroundColor: "#323a5e",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: ["就业人数", "成功就业人数"],
      right: 10,
      top: 12,
      textStyle: {
        color: "#fff",
        fontFamily: '站端高酷黑'
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: "category",
      data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
      axisLine: {
        lineStyle: {
          color: "white",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: '站端高酷黑',
        },
      },
    },
    yAxis: {
      name: '人数/万',
      type: "value",
      max: barSelectEmploymentQuantity.value.sort((a, b) => b - a)[0],
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.3)",
        },
      },
      axisLabel: {},
    },
    dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: "8%",
        start: 10,
        end: 90,
        handleIcon:
            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#fff",
          fontFamily: '站端高酷黑',
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: "就业人数",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#8bd46e",
              },
              {
                offset: 1,
                color: "#09bcb7",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: barSelectEmploymentQuantity.value,
      },
      {
        name: "成功就业人数",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#248ff7",
              },
              {
                offset: 1,
                color: "#6851f1",
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: barSelectSuccessEmploymentQuantity.value,
      },
    ],
  };
  let app = {
    currentIndex: -1,
  };
  let dataLen = option.series[0].data.length;

  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
    dataIndex: app.currentIndex,
  });
  app.currentIndex = (app.currentIndex + 1) % dataLen;
  //console.log(app.currentIndex);
  // 高亮当前图形
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: app.currentIndex,
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: app.currentIndex,
  })
  option && myChart.setOption(option);
}
// 初始化树状结构
const initTreeSelect = () => {
  // 查询树状岗位列表
  proxy.request.get('/jobs/treeJobDTOs').then(res => {
    if (res.code === 1) {
      selectOptions.value = res.data
    }
  })
}
// 查询数据
const searchEmploymentYearByParentIdAndChildrenId = () => {
  proxy.request.get(`/jobs/employmentYear/${parentId.value}/${childrenId.value}`).then(res => {
    if (res.code === 1) {
      barSelectEmploymentQuantity.value = res.data.map(v => Math.floor(v.quantity / 10000))
      barSelectSuccessEmploymentQuantity.value = res.data.map(v => Math.floor(v.successQuantity / 10000))
      barSelect()
    }
  })
}
const initBarSelect = () => {
  initTreeSelect()
  searchEmploymentYearByParentIdAndChildrenId()
}
// initBarSelect()


// 日期改变
const handleDatePicker = () => {
  initPie()
}
// 初始化饼状图
const pie = () => {
  let myChart = echarts.init(proxy.$refs.pie);
  let option;

  let rich = {
    white: {
      color: "#ddd",
      align: "center",
      padding: [5, 0],
    },
  };
  let placeHolderStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      color: "rgba(0, 0, 0, 0)",
      borderColor: "rgba(0, 0, 0, 0)",
      borderWidth: 0,
    },
  };
  let data = [];
  for (let i = 0; i < scaleData.value.length; i++) {
    data.push(
        {
          value: scaleData.value[i].value,
          name: scaleData.value[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 30,
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: "#7777eb",
                },
                {
                  offset: 1,
                  color: "#70ffac",
                },
              ]),
              shadowColor: "rgba(142, 152, 241, 0.6)",
            },
          },
        },
        {
          value: 4,
          name: "",
          itemStyle: placeHolderStyle,
        }
    );
  }
  let seriesObj = [
    {
      name: "",
      type: "pie",
      clockWise: true,
      // radius: [195, 200],
      radius: [95, 100],
      hoverAnimation: false,
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}：{c}%',
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: "outside",
            color: "#ddd",
            formatter: function (params) {
              let percent = 0;
              let total = 0;
              for (let i = 0; i < scaleData.value.length; i++) {
                total += scaleData.value[i].value;
              }
              if (params.name !== "") {
                return params.name
              } else {
                return "";
              }
            },
            rich: rich,
          },
          labelLine: {
            show: true,
          },
        },
      },
      data: data,
    },
  ];
  option = {
    // backgroundColor: "#04243E",
    tooltip: {
      show: false,
    },
    legend: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    series: seriesObj,
  };

  option && myChart.setOption(option);
}
const initPie = () => {
  let year = new Date(yearSelect.value).getFullYear()
  proxy.request.get(`/jobTimes/employmentScaleDatas/${year}`).then(res => {
    if (res.code === 1) {
      scaleData.value = res.data
      pie()
    }
  })
}
// initPie()

// 初始化全国地图
let geoJson = {
  features: []
}
let parentInfo = [{
  cityName: "全国",
  code: 100000
}]
let timeTitle = ['2017', '2018', '2019', '2020','2021','2022','2023']
const getGeoJson = (adcode) => {
  AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
    let districtExplorer = new DistrictExplorer();
    districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
      if (error) {
        console.error(error);
        return;
      }
      let Json = areaNode.getSubFeatures();
      if (Json.length > 0) {
        geoJson.features = Json;
      } else if (Json.length === 0) {
        geoJson.features = geoJson.features.filter(
            item => item.properties.adcode == adcode
        );
        if (geoJson.features.length === 0) return;
      }
      getMapData();
    });
  });
}
//获取数据
const getMapData = () => {
  let mapData = {}, pointData = {}, sum = {}
  timeTitle.forEach(item => {
    mapData[item] = []
    pointData[item] = []
    sum[item] = 0
    geoJson.features.forEach(j => {
      let value = Math.random() * 3000 // value 从后端请求获取每年的就业人数
      // 获取就业人数
      const tempYear = provinceYearMap.value[item]
      for (let i = 0; i < tempYear.length; i++) {
        // console.log(tempYear[i])
        if (tempYear[i].provinceName === j.properties.name){
          mapData[item].push({
            name: j.properties.name,
            // value: value,
            value: tempYear[i].employmentQuantity/10000,
            cityCode: j.properties.adcode
          })
          pointData[item].push({
            name: j.properties.name,
            // value: [j.properties.center[0], j.properties.center[1], value],
            value: [j.properties.center[0], j.properties.center[1], tempYear[i].employmentQuantity/10000],
            cityCode: j.properties.adcode
          })
          sum[item] += tempYear[i].employmentQuantity/10000
        }
      }
    })
    mapData[item] = mapData[item].sort(function (a, b) {
      return b.value - a.value
    });
  })
  // console.log(mapData)
  // console.log(pointData)
  // console.log(sum)
  initEcharts(mapData, pointData, sum)
}
const initEcharts = (mapData, pointData, sum) => {
  let myChart = echarts.init(proxy.$refs.map);
  let option;
  if (parentInfo.length === 1) {
    echarts.registerMap('china', geoJson); //注册
  } else {
    echarts.registerMap('map', geoJson); //注册
  }
  option = {
    timeline: {
      data: timeTitle,
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      left: '10%',
      right: '10%',
      bottom: '2%',
      width: '80%',
      label: {
        normal: {
          textStyle: {
            color: 'rgb(179, 239, 255)',
            fontFamily: '站端高酷黑',
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff',
            fontFamily: '站端高酷黑',
          }
        }
      },
      symbolSize: 10,
      lineStyle: {
        color: '#8df4f4'
      },
      checkpointStyle: {
        borderColor: '#8df4f4',
        color: '#53D9FF',
        borderWidth: 2,
      },
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        normal: {
          color: '#53D9FF',
          borderColor: '#53D9FF'
        },
        emphasis: {
          color: 'rgb(58,115,192)',
          borderColor: 'rgb(58,115,192)'
        }
      },

    },
    baseOption: {
      animation: true,
      animationDuration: 900,
      animationEasing: 'cubicInOut',
      animationDurationUpdate: 900,
      animationEasingUpdate: 'cubicInOut',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
      },
      grid: {
        right: '2%',
        top: '12%',
        bottom: '8%',
        width: '20%'
      },
      toolbox: {
        feature: {
          restore: {
            show: false
          },
          dataView: {
            optionToContent: function (opt) {
              let series = opt.series[0].data //折线图数据
              let tdHeads =
                  '<th  style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">就业人数</th>' //表头
              let tdBodys = '' //数据
              let table =
                  `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
              for (let i = 0; i < series.length; i++) {
                table += `<tr>
                              <td style="padding: 0 50px">${series[i].name}</td>
                              <td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
                              </tr>`
              }
              table += '</tbody></table>'
              return table
            }
          },
          saveAsImage: {
            name: parentInfo[parentInfo.length - 1].cityName + '就业人数统计图'
          },
          dataZoom: {
            show: false
          },
          magicType: {
            show: false
          }
        },
        iconStyle: {
          normal: {
            borderColor: '#1990DA'
          }
        },
        top: 15,
        right: 35
      },
      geo: {
        map: parentInfo.length === 1 ? 'china' : 'map',
        zoom: 1.1,
        roam: true,
        center: parentInfo.length === 1 ? ['118.83531246', '32.0267395887'] : false,
        tooltip: {
          trigger: 'item',
          formatter: (p) => {
            let val = p.value[2];
            if (window.isNaN(val)) {
              val = 0;
            }
            let txtCon =
                "<div style='text-align:left'>" + p.name + ":<br />就业人数：" + val.toFixed(
                    2) + '万</div>';
            return txtCon;
          }
        },
        label: {
          normal: {
            show: true,
            color: "rgb(249, 249, 249)", //省份标签字体颜色
            formatter: p => {
              switch (p.name) {
                case '内蒙古自治区':
                  p.name = "内蒙古"
                  break;
                case '西藏自治区':
                  p.name = "西藏"
                  break;
                case '新疆维吾尔自治区':
                  p.name = "新疆"
                  break;
                case '宁夏回族自治区':
                  p.name = "宁夏"
                  break;
                case '广西壮族自治区':
                  p.name = "广西"
                  break;
                case '香港特别行政区':
                  p.name = "香港"
                  break;
                case '澳门特别行政区':
                  p.name = "澳门"
                  break;
                default:
                  break;
              }
              return p.name;
            }
          },
          emphasis: {
            show: true,
            color: '#f75a00',
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#24CFF4',
            borderColor: '#53D9FF',
            borderWidth: 1.3,
            shadowBlur: 15,
            shadowColor: 'rgb(58,115,192)',
            shadowOffsetX: 7,
            shadowOffsetY: 6,
          },
          emphasis: {
            areaColor: '#8dd7fc',
            borderWidth: 1.6,
            shadowBlur: 25,
          }

        },
      },

    },
    options: []
  }
  timeTitle.forEach(item => {
    let xData = [], yData = []
    let min = mapData[item][mapData[item].length - 1].value
    let max = mapData[item][0].value
    if (mapData[item].length === 1) {
      min = 0
    }
    mapData[item].forEach(c => {
      xData.unshift(c.name)
      yData.unshift(c.value)
    })
    option.options.push({
      title: [{
        left: 'center',
        top: 10,
        text: item + parentInfo[parentInfo.length - 1].cityName +
            '年' +
            '就业人数统计图',
        textStyle: {
          color: 'rgb(179, 239, 255)',
          fontSize: 16,
          fontFamily: '站端高酷黑',
        },
      },
        {
          text: "就业总人数：" + sum[item].toFixed(2) + '万',
          left: 'center',
          top: '6.5%',
          textStyle: {
            color: '#FFAC50',
            fontSize: 26,
            fontFamily: '站端高酷黑',
          }
        }
      ],
      visualMap: {
        min: min,
        max: max,
        left: '3%',
        bottom: '5%',
        calculable: true,
        seriesIndex: [0],
        inRange: {
          color: ['#24CFF4', '#2E98CA', '#1E62AC']
        },
        textStyle: {
          color: '#24CFF4',
          fontFamily: '站端高酷黑',
        }
      },
      xAxis: {
        type: 'value',
        scale: true,
        position: 'top',
        boundaryGap: false,
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#455B77'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 2,
          textStyle: {
            fontSize: 12,
            color: '#c0e6f9',
            fontFamily: '站端高酷黑',
          }
        },
      },
      yAxis: {
        type: 'category',
        nameGap: 16,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#455B77'
          }
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#c0e6f9',
            fontFamily: '站端高酷黑',
          }
        },
        data: xData
      },
      series: [{
        name: item + '就业人数',
        type: 'map',
        geoIndex: 0,
        map: parentInfo.length === 1 ? 'china' : 'map',
        roam: true,
        zoom: 1.3,
        tooltip: {
          trigger: "item",
          formatter: p => {
            let val = p.value;
            if (p.name == '南海诸岛') return
            if (window.isNaN(val)) {
              val = 0;
            }
            let txtCon =
                "<div style='text-align:left'>" + p.name +
                ":<br />就业人数：" + val.toFixed(2) + '万</div>';
            return txtCon;
          }
        },
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          }
        },
        data: mapData[item],

      }, {
        name: '散点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          brushType: 'fill'
        },
        itemStyle: {
          normal: {
            color: '#F4E925',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: pointData[item],
        // symbolSize: 8,
        symbolSize: function (val) {
          let value = val[2]
          if (value == max) {
            return 27
          }
          return 10
        },
        showEffectOn: 'render', //加载完毕显示特效
      },
        {
          type: 'bar',
          barGap: '-100%',
          barCategoryGap: '55%',
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(57,89,255,1)'
              }, {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }]),
            },
            emphasis: {
              show: false
            }
          },
          data: yData
        }

      ]
    })
  })
  myChart.setOption(option, true)
  myChart.off('click');
  // myChart.on('click', echartsMapClick);
}
//点击下钻
// const echartsMapClick = (params) => {
//   if (!params.data) {
//     return
//   }
//   if (
//       parentInfo[parentInfo.length - 1].code ==
//       params.data.cityCode
//   ) {
//     return;
//   }
//   let data = params.data;
//   parentInfo.push({
//     cityName: data.name,
//     code: data.cityCode
//   });
//   getGeoJson(data.cityCode);
//
// }
//选择切换市县
// const chooseArea = (val, index) => {
//   if (parentInfo.length === index + 1) {
//     return
//   }
//   parentInfo.splice(index + 1)
//   getGeoJson(parentInfo[parentInfo.length - 1].code);
// }

const initMap =() => {
  proxy.request.get('/provinceTimes/provinceYearsMap').then(res => {
    if (res.code === 1){
      provinceYearMap.value = res.data
      getGeoJson(100000)
    }
  })
}
// initMap()


// 初始化词云图
const wordCloud = () => {
  let myChart = echarts.init(proxy.$refs.wordCloud);
  let option;
  let data = [
    {
      name: "ikun",
      value: 666,
    },
    {
      name: "蔡徐坤",
      value: 520,
    },
    {
      name: "小黑子",
      value: 333,
    },
    {
      name: "大黑子",
      value: 456,
    },
    {
      name: "高启强",
      value: 256,
    },
    {
      name: "启盛",
      value: 365,
    },
    {
      name: "杨幂",
      value: 256,
    },
    {
      name: "杨迪",
      value: 222,
    },
    {
      name: "idea",
      value: 515,
    },
    {
      name: "ws",
      value: 323,
    },
    {
      name: "vscode",
      value: 120,
    },
    {
      name: "ChatGPT",
      value: 369,
    },
    {
      name: "OpenAI",
      value: 426,
    },
    {
      name: "Elon Musk",
      value: 563,
    },
    {
      name: "Jack Ma",
      value: 363,
    },
    {
      name: "tx",
      value: 236,
    },
    {
      name: "MsFiiire",
      value: 369,
    },
    {
      name: "狂飙",
      value: 385,
    },
    {
      name: "小狗",
      value: 375,
    },
    {
      name: "王甜心",
      value: 355,
    },
    {
      name: "浪人",
      value: 355,
    },
    {
      name: "成杰",
      value: 335,
    },
    {
      name: "Optimus Primer",
      value: 324,
    },
  ];

  option = {
    title: {
      text: "词云展示",
      x: "left",
      textStyle: {
        fontSize: 22,
        color: "rgba(255, 255, 255, 0.8)",
        fontFamily: '站端高酷黑',
      },
    },
    // backgroundColor: "#052540",
    tooltip: {
      show: true,
    },
    series: [
      {
        name: "热点分析",
        type: "wordCloud",
        size: ['15%', '100%'],
        // sizeRange: [6, 66],//最小文字——最大文字
        shape: 'circle',
        gridSize: 8,//字符间距
        textPadding: 0,
        autoSize: {
          enable: true,
          minSize: 6,
        },
        textStyle: {
          normal: {
            color: function () {
              return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 105) + 150,
                    Math.round(Math.random() * 105) + 150,
                    Math.round(Math.random() * 105) + 150,
                  ].join(",") +
                  ")"
              );
            },
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
          fontFamily: '站端高酷黑',
        },
        data: data,
      },
    ],
  };

  option && myChart.setOption(option);
}

// 初始化柱状图
const rateBar = () => {

  let myChart = echarts.init(proxy.$refs.rateBar);
  let option;

  option = {
    title: {
      text: "近几年就业数据对比",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20,
        fontFamily: '站端高酷黑',
      },
      top: "3%",
      // left: "0%",
    },
    // backgroundColor: "#0f375f",
    grid: {
      top: "25%",
      bottom: "10%", //也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
        },
      },
    },
    legend: {
      data: ["就业率", "就业人数"],
      top: "15%",
      textStyle: {
        color: "#ffffff",
        fontFamily: '站端高酷黑',
      },
    },
    xAxis: {
      data: [
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
        "2023"
      ],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#01FCE3",
        },
      },
      axisTick: {
        show: true, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac", //X轴文字颜色
          fontFamily: '站端高酷黑',
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "人数/万",
        nameTextStyle: {
          color: "#ebf8ac",
          fontFamily: '站端高酷黑',
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac",
            fontFamily: '站端高酷黑',
          },
        },
      },
      {
        type: "value",
        name: "就业率%",
        nameTextStyle: {
          color: "#ebf8ac",
          fontFamily: '站端高酷黑',
        },
        position: "right",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: "{value}", //右侧Y轴文字显示
          textStyle: {
            color: "#ebf8ac",
            fontFamily: '站端高酷黑',
          },
        },
      },
      {
        type: "value",
        gridIndex: 0,
        min: 50,
        max: 100,
        splitNumber: 8,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
          },
        },
      },
    ],
    series: [
      {
        name: "就业率",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 10, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#058cff",
        },
        lineStyle: {
          color: "#058cff",
        },
        areaStyle: {
          color: "rgba(5,140,255, 0.2)",
        },
        // data: [25, 36, 12, 68, 55, 78,55],
        data: employmentRate.value
      },
      {
        name: "就业人数",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FFE3",
              },
              {
                offset: 1,
                color: "#4693EC",
              },
            ]),
          },
        },
        // data: [200, 300, 480, 351, 292, 285, 369],
        data: employmentQuantity.value
      },
    ],
  };

  option && myChart.setOption(option);
}
const initRateBar = () => {
  // 请求近几年的就业数据
  proxy.request.get('/jobTimes/employmentYears').then(res => {
    if (res.code === 1) {
      employmentRate.value = res.data.map(v => v.employmentRate)
      employmentQuantity.value = res.data.map(v => Math.floor(v.quantity / 10000))
      successEmploymentQuantity.value = res.data.map(v => Math.floor(v.successQuantity / 10000))
      rateBar()
    }
  })
}
// initRateBar()


onMounted(() => {
  wordCloud()
})

</script>

<style lang="less" scoped>
.employment-rate {
  font-size: 25px;
  border: 1px solid var(--el-border-color);
}

* {
  color: #fff;
}

.mapChoose {
  color: #eee;

  .title {
    padding: 5px;
    border-top: 1px solid rgba(147, 235, 248, .8);
    border-bottom: 1px solid rgba(147, 235, 248, .8);
    cursor: pointer;
  }

  .icon {
    font-family: "simsun";
    font-size: 25px;
    margin: 0 11px;
  }
}
</style>
